<template>
  <div class="all">
    <div class="left">
      <div class="question-info">
        <div>
          <h2>题目描述：</h2>
          <p>{{ question.description }}</p>
        </div>
        <div>
          <h2>输入：</h2>
          <pre>{{ question.input }}</pre>
        </div>
        <div>
          <h2>输出：</h2>
          <pre>{{ question.output }}</pre>
        </div>
        <div>
          <h2>示例：</h2>
          <pre>{{ question.example }}</pre>
        </div>
        <div>
          <h2>时间限制：</h2>
          <p>{{ question.timeLimit }}ms</p>
        </div>
        <div>
          <h2>空间限制：</h2>
          <p>{{ question.spaceLimit }}MB</p>
        </div>
        <div>
          <h2>通过率：</h2>
          <p>{{ question.acceptanceRate }}%</p>
        </div>
      </div>
    </div>
    <div class="right">
    <codemirror
        v-model="code"
        placeholder="Code gose here..."
        :style="{ height: '750px' }"
        :autofocus="true"
        :indent-with-tab="true"
        :tabSize="2"
        :extensions="extensions"
        @ready="log('ready', $event)"
        @change="log('change', $event)"
        @focus="log('focus', $event)"
        @blur="log('blur', $event)"
    />
    </div>
  </div>
  <el-button color="#545c64" plain>提交</el-button>
</template>

<script>
import { Codemirror } from "vue-codemirror";
import { javascript } from "@codemirror/lang-javascript";
import { oneDark } from "@codemirror/theme-one-dark";

import { ref } from "vue";
export default {
  components: {
    Codemirror,
  },
  setup() {
    const code = ref(``);
    const extensions = [javascript(), oneDark];
    const question = {
      description: '题目描述',
      input: '输入格式',
      output: '输出格式',
      example: '示例',
      timeLimit: 1000,
      spaceLimit: 256,
      acceptanceRate: 80
    };
    return {
      code,
      extensions,
      log: console.log,
      question
    };
  },
};
</script>

<style scoped>
.all{
  display: flex;
}
.right{
  width: 50%;
  margin-left: auto;
}
.el-button{
  position: absolute;
  right: 0;
}
</style>